/**
 * 创建者：luyiming
 * 该页面用于：
 * 创建时间： 2019-12-20 01:27:15
 */
import {
	debounce
} from '@/utils'
import infoHeader from './components/Header/index.vue'
import mapChart from "@/components/ql_component/Charts/mapChart";
import barChart from "@/components/ql_component/Charts/barChart";
import Count from "@/components/ql_component/Count";
import infoTable from "@/components/ql_component/Table/info-table";
import LinePercentage from "@/components/Charts/LinePercentage"; // 进度条
import LunBo from "@/components/Charts/LunBo";
import BrokenLineChart from "@/components/Charts/BrokenLineChart";
import TopRank from "@/components/Charts/TopRank"; // 进度条
import NumberIndex from "@/components/Charts/NumberIndex"; // 进度条
import PieFullChart from "@/components/Charts/PieFullChart";
import PieChart from "@/components/Charts/PieChart";
import {cloneDeep} from "lodash";

import {
	getMapData,
	getCount,
	enterpriseDistribution,
	getTableData,
	nuclearSafety,
	sourceHazardLevel,
	classificationIndustry,
	abnormalTrend,
	regionalAnomaly,
	supervisoryInfo,
	abnormalAndWork,
	getRightAndCount,
	getRadUsedByRadTypeID,
	getAbnormalAndareaAbnormal
} from "@/api/RCIM/RCIM-information"


export default {
	name: 'InformationRcim_view',
	components: {
		infoHeader,
		mapChart,
		barChart,
		Count,
		LunBo,
		infoTable,
		PieChart,
		NumberIndex,
		BrokenLineChart,
		TopRank,
		PieFullChart,
		LinePercentage
	},
	// 数据
	data() {
		return {
			tabelLabel: INFO_TABLE_LABEL,
			resizefun: null,
			// 控制信息舱左右侧侧边栏是否隐藏
			hideSide: false,
			// 是否显示按钮
			showBtn: false,
			isShowClickLf: false,
			isShowClickRg: false,
			isClose: false,
			winWidth: window.innerWidth,
			mapData: {},
			countData: [{
					name: "源总数",
					count: 0
				},
				{
					name: "企业总数",
					count: 0
				},
				{
					name: "车辆总数",
					count: 0
				}
			],
			companyData: [],
			levelData: [],
			industryData: [],
			tableRadio: ACTIVE_INFO_TABLE_LABEL,
			tableHeight: "",
			tableData: [],
			tableHead: [],
			stationSourceData: [{
				enterprise: "",
				place: "",
				installPlace: "",
				applicationType: "",
				dose: "",
				colletTime: ""
			}],
			stationSourceHead: [{
					prop: "enterprise",
					label: "企业",
					width: "150px",
					align: "center"
				},
				{
					prop: "place",
					label: "场所",
					width: "",
					align: "center"
				},
				{
					prop: "installPlace",
					label: "安装位置",
					width: "",
					align: "center"
				},
				{
					prop: "applicationType",
					label: "应用类型",
					width: "",
					align: "center"
				},
				{
					prop: "dose",
					label: "剂量（uSv/h）",
					width: "100px",
					align: "center"
				},
				{
					prop: "colletTime",
					label: "采集时间",
					width: "150px",
					align: "center"
				},

			],
			moveSourceData: [{
				enterprise: "",
				area: "",
				applicationType: "",
				installPlace: "",
				dose: "",
				battery: "",
				status: "",
				colletTime: ""
			}],
			moveSourceHead: [{
					prop: "enterprise",
					label: "企业",
					width: "150px",
					align: "center"
				},
				// {
				// 	prop: "sourceCode",
				// 	label: "源编码",
				// 	width: "",
				// 	align: "center"
				// },
				// {
				// 	prop: "nucleusName",
				// 	label: "核素名称",
				// 	width: "",
				// 	align: "center"
				// },
				// {
				// 	prop: "pollution",
				// 	label: "污染程度",
				// 	width: "",
				// 	align: "center"
				// },
				{
					prop: "area",
					label: "区域",
					width: "",
					align: "center"
				}, {
					prop: "applicationType",
					label: "应用类型",
					width: "",
					align: "center"
				},
				{
					prop: "installPlace",
					label: "安装位置",
					width: "",
					align: "center"
				},
				{
					prop: "dose",
					label: "剂量（uSv/h）",
					width: "100px",
					align: "center"
				},
				{
					prop: "battery",
					label: "电量",
					width: "",
					align: "center"
				},
				{
					prop: "status",
					label: "当前状态",
					width: "",
					align: "center"
				},
				{
					prop: "colletTime",
					label: "采集时间",
					width: "150px",
					align: "center"
				}
			],
			monthList: [], // 月度异常趋势
			dataList: [],
			seriesData: [], // 区域异常
			abnormalTotalNum: 0, //区域异常总数
			LunBoDataList: [], //督办信息
			abnormalTotal: 0,
			classificationIndustryList: [],
			safetyList: [], // 核安全排名,
			abnormalAndWork: {},
			abnormalData: {},
			copyClassificationIndustryListData: [],
		}
	},
	// 监听
	watch: {
		tableRadio(val, oldVal) {
			this.tableData = []
			this.tableHead = Number(val) ? this.stationSourceHead : this.moveSourceHead;
			this.getTableData({
				type: Number(val)
			})
		}
	},
	// Vue实例初始化完成
	created() {
		this.init()
	},
	// Vue挂载完成
	mounted() {
		this.resizefun = this.__resizeHandler(100)
		this.resizefun()
		window.addEventListener('resize', this.resizefun)
		const head = document.querySelector(".informationRCIM_view .tb_wrap")
		this.tableHeight = head.clientHeight - 20
		this.resizefun()
		window.addEventListener('resize', this.resizefun)
	},
	// Vue实例销毁前
	beforeDestroy() {
		window.removeEventListener('resize', this.resizefun)
	},
	// 挂载的方法
	methods: {
		/**
		 * 方法描述
		 */
		exampleFunc() {
			return void 0
		},
		/**
		 * @desc 跳转异常
		 * @param {Object} param 跳转传参
		 */
		abnormalSkip(param) {
			console.log(param);

			this.$router.push({
				path: '/RCIM-abnormalSearch', query: param
			})
		},
		/**
		 * @desc 页面重置
		 * @param {Number} daley 延时
		 */
		__resizeHandler(daley) {
			return debounce(() => {
				let width = window.innerWidth
				this.winWidth = width
				if (width < 1280) {
					this.hideSide = true
					this.showBtn = true
				} else {
					this.hideSide = false
					this.showBtn = false
					this.isClose = false;

					this.isShowClickLf = false;

					this.isShowClickRg = false;
				}
				const head = document.querySelector(".informationRCIM_view .tb_wrap")
				this.tableHeight = head.clientHeight - 20
			}, daley)
		},
		/**
		 * @desc 源危险等级分布点击回调
		 * @param {*} id 
		 */
		paramId(id) {
			if( id === 'all' ){
				return this.classificationIndustryList = this.copyClassificationIndustryListData;
			}
			getRadUsedByRadTypeID({
				id
			}).then(res => {
				let data = res.data
				const classColor = ["#4a90e2", "#50e3c2", "#ff9b53", "#d03702", "#e1da83"]
				let classificationIndustryListTemp = data.dataList.sort((a, b) => b.value - a.value)
				this.classificationIndustryList = classificationIndustryListTemp.map((v, index) => {
					const total = classificationIndustryListTemp.reduce((prev, next) => prev + next.value, 0)
					v.percent = parseFloat(v.value / total).toFixed(2) * 100
					v.color = classColor[index]
					return v
				})
			})
		},
		/**
		 * @desc 地图点击跳转
		 * @param {*} param 
		 */
		mapClick(param) {
			this.$router.push({path: '/RCIM-Geographic'})
		},
		/**
		 * @desc 显示两侧按钮
		 * @param {*} type 是否显示左按钮
		 */
		showBtnClick(type) {
			if (this.isClose) return;
			if (type === 'lf') {
				if (this.isShowClickLf) {
					this.isClose = true;
					return setTimeout(() => {
						this.isClose = false;
						this.isShowClickLf = !this.isShowClickLf
					}, 500)
				} else {
					setTimeout(() => {
						this.$refs.chart1.__resizeHandler()
						this.$refs.chart2.__resizeHandler()
						this.$refs.chart3.__resizeHandler()
						this.$refs.chart4.__resizeHandler()
						this.$refs.chart5.__resizeHandler()
					}, 100)
					return this.isShowClickLf = !this.isShowClickLf
				}

			}
			if (this.isShowClickRg) {
				this.isClose = true;
				return setTimeout(() => {
					this.isClose = false;
					this.isShowClickRg = !this.isShowClickRg
				}, 500)
			} else {
				this.isShowClickRg = !this.isShowClickRg
				setTimeout(() => {
					this.$refs.chart1.__resizeHandler()
					this.$refs.chart2.__resizeHandler()
					this.$refs.chart3.__resizeHandler()
					this.$refs.chart4.__resizeHandler()
					this.$refs.chart5.__resizeHandler()
				}, 100)
			}

		},
		/**
		 * @desc 获取异常数据
		 */
		getAbnormalTrend() {
			abnormalTrend().then(data => {
				const {
					trendData
				} = data.data
				this.monthList = []
				this.dataList = []
				for (let item of trendData) {
					this.monthList.push(item.month)
					this.dataList.push(item.value)
				}
			})
		},
		/**
		 * @desc 获取区域异常数据
		 */
		getRegionalAnomaly() {
			regionalAnomaly().then(data => {
				const {
					seriesData,
					abnormalTotal
				} = data.data.data
				this.seriesData = seriesData
				this.abnormalTotalNum = abnormalTotal
			})
		},
		/**
		 * @desc 督办信息
		 */
		getSupervisoryInfo() {
			supervisoryInfo().then(data => {
				const {
					supervisoryArray,
					abnormalTotal
				} = data.data
				this.LunBoDataList = supervisoryArray
				this.abnormalTotal = abnormalTotal
			})
		},
		/**
		 * @desc 行业分类top5
		 */
		getClassificationIndustry() {
			classificationIndustry({
				userId: 1,
				typeId: 3
			}).then(data => {
				const {
					dataList
				} = data.data.data;
				this.classificationIndustryList = dataList;
			})
		},
		/**
		 * @desc 核安全排名
		 */
		getNuclearSafety() {
			nuclearSafety({
				userId: 1
			}).then(data => {
				const {
					safetyList
				} = data.data.data;
				this.safetyList = safetyList;
			})
		},
		/**
		 * @desc 异常和在库作业数据
		 */
		getAbnormalAndWork() {
			abnormalAndWork(
				// 	{
				// 	userId: 1
				// }
			).then(data => {
				const abnormalAndWork = data.data.sourceStatus
				console.log(abnormalAndWork)
				this.abnormalAndWork = abnormalAndWork
			})
		},
		/**
		 * 获取地图数据
		 */
		async getMapData() {
			const {
				data
			} = await getMapData()

			let mapData = {
				geoCoordMap: {},
				mapData: []
			}

			for (const key in data) {
				data[key].map(v => {
					mapData.geoCoordMap[v.name] = [v.lng, v.lat]
					mapData.mapData.push(v)
				})
			}
			this.mapData = mapData


		},
		/**
		 * 获取源总数
		 */
		async getCount() {
			const {
				data
			} = await getCount()
			this.countData = data.countData

		},
		/**
		 * 获取企业区域分布
		 */
		async enterpriseDistribution() {
			const {
				data
			} = await enterpriseDistribution()
			this.companyData = data.companyData
		},
		/**
		 * 获取表格数据
		 */
		async getTableData(param) {
			const {
				data
			} = await getTableData(param)
			console.log('固定源的表格', data);

			this.tableData = data.tableData
		},
		/**
		 * 获取源危险等级
		 */
		async sourceHazardLevel() {
			const {
				data
			} = await sourceHazardLevel()
			this.levelData = data.levelList
		},
		/**
		 * getRightAndCount
		 */
		async getRightAndCount() {
			const {
				data
			} = await getRightAndCount()
			// 处理源危险等级分布，排序和颜色问题
			const levelColor = INFO_SOUCE_TYPE_COLORS;
			const indeList = ["Ⅰ类", "Ⅱ类", "Ⅲ类", "Ⅳ类", "Ⅴ类"]
			const levelDataTemp = data.levelList //.sort((a,b) => b.value - a.value)
			this.levelData = levelDataTemp.map((item, index) => {
				const indexs = indeList.findIndex(itemType => item.name === itemType)
				item.itemStyle.color = levelColor[indexs]
				return item
			})
			this.countData = data.countData.filter(item => {
				return item.name !== '人员总数'
			})

			const classColor = ["#4a90e2", "#50e3c2", "#ff9b53", "#d03702", "#e1da83"]
			let classificationIndustryListTemp = data.dataList.sort((a, b) => b.value - a.value)
			this.classificationIndustryList = classificationIndustryListTemp.map((v, index) => {
				const total = classificationIndustryListTemp.reduce((prev, next) => prev + next.value, 0)
				v.percent = parseFloat(v.value / total).toFixed(2) * 100
				v.color = classColor[index]
				return v
			})
			this.copyClassificationIndustryListData = cloneDeep(this.classificationIndustryList)
			this.safetyList = data.safetyList
		},
		/**
		 * abnormalAndareaAbnormal
		 */
		async getAbnormalAndareaAbnormal() {
			const {
				data
			} = await getAbnormalAndareaAbnormal()
			this.abnormalData = data.abnormalData
			// this.seriesData = data.seriesData.seriesData
			let seriesData = data.seriesData.seriesData
			let colorList = ["#fcd125","#fca223","#fa6633","#fc2a2a","#bb0505","#921140"]
			seriesData.map((v,i) => {
				v.itemStyle = {}
				v.itemStyle.color = colorList[i]
			})
			this.seriesData = seriesData
			this.abnormalTotalNum = data.seriesData.abnormalTotal
		},
		/**
		 * 行业top5
		 */
		// async classificationIndustry() {
		// 	const {
		// 		data
		// 	} = await classificationIndustry()
		// 	this.industryData = data.dataList
		// },
		// /**
		//  * 核安全top5
		//  */
		// async nuclearSafety() {
		// 	const {
		// 		data
		// 	} = await nuclearSafety()
		// 	console.log(data);

		// 	this.safetyList = data.safetyList
		// },
		init() {
			this.getMapData()
			// this.getCount()
			this.tableHead = this.moveSourceHead
			this.getTableData({
				type: 0
			})
			// this.sourceHazardLevel()
			this.enterpriseDistribution()
			this.getAbnormalTrend(); //获取月度异常数据
			// this.getRegionalAnomaly(); //获取区域异常数据
			this.getSupervisoryInfo(); //督办信息
			// this.getClassificationIndustry(); //行业分类top5
			// this.getNuclearSafety(); //核安全排名
			this.getAbnormalAndWork()
			this.getAbnormalAndareaAbnormal()
			this.getRightAndCount()
		}

	},
}
